/<template>
  <div class="content">
    <el-form
      label-position="top"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="form"
    >
      <div class="form_item">
        <div
          label="规则名称"
          prop="name"
          class="form_label"
        >
          <div style="margin-right: 10px;">关注抖音号、私信设置
          </div>
          <div>
            <el-switch
              v-model="formData.follow_switch"
              active-value="1"
              inactive-value="2"
              active-color="#13ce66"
              inactive-color="#DDDFE6"
            >
            </el-switch>
          </div>
        </div>
        <div
          v-if="formData.follow_switch == 1"
          class="form_value"
        >
          <el-form-item
            class="follow_switch_content"
            prop="aweme_id"
          >
            <div class="follow_switch_label">
              <span>关注、私信抖音号</span>
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
              >
                <div slot="content">引导关注的抖音号，只显示小程序绑定的成功的品牌号、员工号（员工号官方未开放）， <a
                    href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/open-capacity/operation/brand-uid"
                    target="_blank"
                  >点击查看如何绑定品牌号</a> </div>
                <i
                  class="el-icon-question"
                  style="margin-left:5px;"
                ></i>
              </el-tooltip>
            </div>
            <div class="follow_switch_value">
              <el-select
                v-model="formData.aweme_id"
                clearable
                style="width: 100%"
                placeholder="请选择抖音号"
              >
                <el-option
                  v-for="item in optionsList.aweme_id"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="form_item">
        <div class="form_label">
          <div style="margin-right: 10px;">加群设置 </div>
          <div>
            <el-switch
              v-model="formData.group_switch"
              active-value="1"
              inactive-value="2"
              active-color="#13ce66"
              inactive-color="#DDDFE6"
            >
            </el-switch>
          </div>

        </div>
        <div
          v-if="formData.group_switch == 1"
          class="form_value"
        >
          <el-form-item
            class="follow_switch_content"
            prop="group_member_id"
            style="margin-bottom: 0;"
          >
            <div class="follow_switch_label">
              <span>群主ID</span>
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
              >
                <div slot="content">
                  <div>1、确保使用抖音号已在抖音开放平台添加为品牌号且已授权粉丝群管理能力</div>
                  <div>2、用该抖音号访问当前设置抖音小程序，进入我的页面，找到用户id，将该id填入群主用户ID</div>
                </div>
                <i
                  class="el-icon-question"
                  style="margin-left:5px;"
                ></i>
              </el-tooltip>
            </div>
            <div class="follow_switch_value">
              <el-input
                v-model="formData.group_member_id"
                placeholder="请输入群主ID"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item
            class="follow_switch_content"
            prop="webhook_secret"
            style="padding-top: 10px;"
          >
            <div class="follow_switch_label">
              <span>Webhook AppSecret</span>
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
              >
                <div slot="content">
                  登录对应小程序抖音开放平台，开发-开发配置-Webhook 页面的 Webhook Secret 位置获取
                </div>
                <i
                  class="el-icon-question"
                  style="margin-left:5px;"
                ></i>
              </el-tooltip>
            </div>
            <div class="follow_switch_value">
              <el-input
                v-model="formData.webhook_secret"
                placeholder="请输入Webhook AppSecret"
              ></el-input>
            </div>
          </el-form-item>
        </div>

      </div>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        class="btn"
        type="primary"
        @click="onSubmit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import { followGroupSwitch } from '@/api/miniApp'
import { commonData } from '@/api/common'
export default {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        follow_switch: false,
        group_switch: false,
        aweme_id: '',
        group_member_id: '',
        webhook_secret: ''
      },
      rules: {
        aweme_id: [{ required: true, message: '请输入关注、私信抖音号', trigger: 'blur' }],
        group_member_id: [{ required: true, message: '请输入群主ID', trigger: 'blur' }],
        webhook_secret: [{ required: true, message: '请输入Webhook AppSecret', trigger: 'blur' }]
      },
      optionsList: {
        aweme_id: []
      }
    }
  },
  mounted() {
    console.log(this.rowInfo)
    this.getAwemeId()
    this.formData.follow_switch = this.rowInfo.follow_switch
    this.formData.group_switch = this.rowInfo.group_switch
    this.formData.aweme_id = this.rowInfo.aweme_id
    this.formData.group_member_id = this.rowInfo.group_member_id
    this.formData.webhook_secret = this.rowInfo.webhook_secret
    console.log(this.formData)
  },
  methods: {
    async getAwemeId() {
      const res = await commonData({
        type: 'dyBindAccount',
        mini_app_id: this.rowInfo.id
      })
      if (res.status_code === 1) {
        this.optionsList.aweme_id = res.data.data
      }
    },
    async onSubmit() {
      const res = await followGroupSwitch({
        mini_app_id: this.rowInfo.id,
        ...this.formData
      })
      if (res.status_code === 1) {
        this.$emit('ok')
      }
    },
    close() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 0;
  .form {
    padding: 0 20px;
    .form_item {
      margin-bottom: 20px;
      .form_label {
        display: flex;
        margin-bottom: 12px;
        align-items: center;
      }
      .form_value {
        .follow_switch_content {
          background-color: #f7f8fa;
          padding: 20px;
          .follow_switch_label {
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            > span::before {
              content: '*';
              display: inline-block;
              margin-right: 5px;
              color: red;
            }
          }
          .follow_switch_value {
            margin-top: 8px;
          }
        }
      }
    }
  }
}
</style>